<template>
  <div class="header-info">
    <div class="info">
      <viewer class="viewer" ref="viewer" :images="[inviteDetailCount.avatar]">
        <img
          v-if="inviteDetailCount.avatar"
          :src="inviteDetailCount.avatar"
          class="viewer-img"
          style="width:80px;height:80px;border-radius: 50%;"
        />
        <img v-else src="@/assets/icons/default_userIcon.png" style="width:80px;height:80px;border-radius: 50%;" />
      </viewer>
      <div>
        <span class="name">{{ inviteDetailCount.userName }}</span>
        <div class="companyInfo">
          <span class="org">{{ inviteDetailCount.companyName }}</span>
          <span class="companyInfoTag">{{ inviteDetailCount.memberLevelName }}</span>
        </div>
      </div>
    </div>
    <div class="statistics">
      <div>
        <span>报名成功人数</span>
        <span>{{ inviteDetailCount.registerNum }}</span>
      </div>
      <div>
        <span>浏览人数</span>
        <span>{{ inviteDetailCount.browsePeopleNum }}</span>
      </div>
      <div>
        <span>浏览次数</span>
        <span>{{ inviteDetailCount.browseNum }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    inviteDetailCount: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style lang="less" scoped>
.header-info {
  background: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .info {
    display: flex;
    gap: 24px;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    .name {
      color: #4e5969;
      font-size: 24px;
      font-weight: 400;
      line-height: 32px;
    }
    .companyInfo {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      .org {
        color: #4e5969;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin-right: 8px;
      }
      .companyInfoTag {
        display: inline-block;
        background: #e8f7ff;
        color: #3491fa;
        padding: 1px 8px;
        border-radius: 2px;
      }
    }
  }
  .statistics {
    display: flex;
    gap: 24px;
    & > div {
      width: 176px;
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 8px;
      & > span:first-of-type {
        color: #4e5969;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
      }
      & > span:last-of-type {
        color: #1d2129;
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
      }
    }
  }
}
</style>
